<template>
  <div class="videoInfo w">
    <div v-if="videoDetail.id">
      <div class="videoTitle">{{ videoDetail.name }}</div>
      <div class="videoPlayCount">
        {{ videoDetail.playCount | playCountFormat }}
      </div>
    </div>
    <div v-else>
      <div class="videoTitle">{{ videoDetail.title }}</div>
      <div class="videoPlayCount">
        {{ videoDetail.playTime | playCountFormat }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VideoInfo",
  props: {
    videoDetail: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  filters: {
    playCountFormat(val) {
      if (val < 10000) return val + "次播放";
      return (val / 10000).toFixed(1) + "万次播放";
    },
  },
};
</script>

<style lang="scss" scoped>
.videoInfo {
  padding-top: 1rem;
  color: #1a1a1a;
  .videoTitle {
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }
  .videoPlayCount {
    font-size: 0.8rem;
  }
}
</style>